<template>
	<view class="tabbar">
		<view class="item" v-for="(item,index) in tabbarItem" @tap='tabbarTap(index)'>
			<view class="">
				<image :src="item.active_icon" v-show="selected == index"></image>
				<image :src="item.icon" v-show="selected != index"></image>
			</view>
			{{item.label}}
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				selected:0,
				tabbarItem: [{
						label: '消息',
						path: '/pages/index/index',
						icon: '/static/icon/tabbar/msg.png',
						active_icon: "/static/icon/tabbar/msg_selected.png"
					},
					{
						label: '联系人',
						path: '/pages/contacts/contacts',
						icon: '/static/icon/tabbar/contacts.png',
						active_icon: "/static/icon/tabbar/contacts_selected.png"
					},
					{
						label: '动态',
						path: '/pages/center/index',
						icon: '/static/icon/tabbar/dongtai.png',
						active_icon: "/static/icon/tabbar/dongtai_selected.png"
					}
				],
			}
		},
		watch: {
			selected: function(val) {
				console.log(val)
			}
		},
		methods: {
			tabbarTap(index) {
				this.selected = index
				this.$emit('changeTabIndex',index)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar {
		height: 100rpx;
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		border-top: 1px solid rgba(128, 128, 128, .3);
		background-color: rgb(168,228,101);
		
		.item {
			flex: 1;
			text-align: center;
			font-size: 28rpx;

			image {
				height: 40rpx;
				width: 40rpx;
				margin-top: 10rpx;
			}
		}
	}
</style>
